import Img from "../../../assets/chatCard/14.webp";
import CImg from "../../../assets/chatCard/15.webp";
import Roto from "../../../assets/chatCard/16.webp";
import Brush from "../../../assets/chatCard/17.webp";
import Closed from "../../../assets/chatCard/8.webp";
import { AnyObject } from "antd/es/_util/type";
import { memo, useState } from "react";
import "./index.css";
import ScrollCom from "./scrollCom";
import AIHeader from "./header";
import AIInput from "./AIInput";
const ImageGeneration = ({ resetIndex }: AnyObject) => {
  const [cardIndex, setCardIndex] = useState(0);
  const cardList = [
    "精选",
    "人像摄影",
    "商业营销",
    "艺术",
    "国风插画",
    "动漫",
    "3D渲染",
    "商品",
    "风景",
  ];
  return (
    <>
      <ScrollCom
        cardIndex={cardIndex}
        cardList={cardList}
        handleIndex={(index: number) => setCardIndex(index)}
      >
        <div className="w-card w-quarter-minus-8 rounded-lg border border-gray-black"></div>
      </ScrollCom>
      <div className="rounded-2xl bg-z-black border-gray-black border overflow-hidden relative items-center">
        <AIHeader
          resetIndex={resetIndex}
          img={Img}
          Closed={Closed}
          title="图像生成"
        />
        <AIInput
          placeholder="描述你所想象的画面，角色，情绪，场景，风格..."
          toolLeft={
            <div className="flex gap-2.5 mt-4">
              <IMGCom icon={CImg} text="参考图" />
              <IMGCom icon={Roto} text="比例" />
              <IMGCom icon={Brush} text="风格" />
            </div>
          }
        />
      </div>
    </>
  );
};
const IMGCom = memo(({ icon, text }: AnyObject) => {
  return (
    <div className="rounded-lg border border-gray-black py-2 px-3 text-xs  cursor-pointer text-white flex box-border">
      <img src={icon} className="w-4 h-4 mr-1.5" alt="" />
      <div>{text}</div>
    </div>
  );
});

export default ImageGeneration;
